import React from 'react';
import { Table, Button, Space, Switch, Input, Popover, message } from 'antd';
import { withRouter } from 'react-router-dom';
import axios from '../../../utils/http';
const { Column } = Table;
/* 提示框 */
class PopoverDel extends React.Component {
  state = {
    visible: false,
  };

  hide = () => {
    this.setState({
      visible: false,
    });
    axios({
      url: '/mm-goods/goods/delGoods',
      params: { goodsId: this.props.id },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('删除成功，可在回收站还原');
        this.props.getAllGoods();
      }
    });
  };

  handleVisibleChange = visible => {
    this.setState({ visible });
  };

  render() {
    return (
      <Popover
        content={
          <div style={{ textAlign: 'center' }}>
            <p style={{ color: '#eb4d4b' }}>确认删除吗？</p>
            <Button type="primary" onClick={this.hide}>
              确认
            </Button>
          </div>
        }
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
      >
        <Button type="primary">删除</Button>
      </Popover>
    );
  }
}

@withRouter
class GoodsTable extends React.Component {
  state = {
    recyceGoodsList: [],
  };
  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          recyceGoodsList: selectedRowKeys,
        });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        let idArr = selectedRows.map(item => {
          return item.goods_id;
        });
        this.setState({
          recyceGoodsList: idArr,
        });
      },
    };
    const {
      tableList,
      addRecyce,
      changeGoodsState,
      modify,
      getAllGoods,
      updateGoodsSort,
      changeXnxl,
    } = this.props;
    return (
      <>
        <div className="table" style={{ position: 'relative', padding: '0 20px' }}>
          <Table
            rowSelection={rowSelection}
            dataSource={tableList}
            pagination={{
              defaultPageSize: 5,
              total: tableList.length,
              pageSizeOptions: [5, 10, 15],
              defaultCurrent: 1,
            }}
            rowKey="goods_id"
          >
            <Column align="center" title="商品编号" dataIndex="goods_id" key="goods_id"></Column>

            <Column
              align="left"
              title="商品名称"
              key="goods_pp"
              render={({ goods_name, goods_pp }) => {
                return (
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                    key={goods_pp}
                  >
                    <img
                      style={{ width: '80px', height: '80px' }}
                      src={goods_pp}
                      alt={goods_name}
                    />
                    <p style={{ paddingLeft: '30px' }}>{goods_name}</p>
                  </div>
                );
              }}
            ></Column>

            <Column
              align="center"
              title="商品价格"
              dataIndex="goods_price"
              key="goods_price"
            ></Column>
            <Column
              align="center"
              title="上架"
              key="id1"
              render={({ goods_sjzt, goods_id }) => (
                <Switch
                  onChange={e => changeGoodsState(e, goods_id)}
                  defaultChecked={!!goods_sjzt}
                />
              )}
            ></Column>
            <Column
              align="center"
              title="排序"
              key="goods_px"
              render={({ goods_px, goods_id }) => (
                <Input
                  type="number"
                  defaultValue={goods_px}
                  placeholder="默认200"
                  style={{ width: '100px' }}
                  onBlur={e => {
                    updateGoodsSort(goods_id, e.target.value);
                  }}
                />
              )}
            ></Column>
            <Column
              align="center"
              title="虚拟销量"
              key="id3"
              render={({ xnxl, goods_id }) => (
                <Input
                  type="number"
                  defaultValue={xnxl}
                  onBlur={e => changeXnxl(goods_id, e.target.value)}
                  placeholder="默认200"
                  style={{ width: '100px' }}
                />
              )}
            ></Column>
            <Column
              align="center"
              title="操作"
              key="-goods_code"
              render={({ goods_id }) => {
                return (
                  <Space>
                    <Button type="primary" style={{ margin: '0' }} onClick={() => modify(goods_id)}>
                      修改
                    </Button>
                    <PopoverDel id={goods_id} getAllGoods={getAllGoods} />
                  </Space>
                );
              }}
            ></Column>
          </Table>
          <div className="addrecy-btn">
            <Button
              style={{ marginLeft: '20px' }}
              onClick={() => addRecyce(this.state.recyceGoodsList)}
            >
              加入回收站
            </Button>
          </div>
        </div>
      </>
    );
  }
}
export default GoodsTable;
